<template>
  <view class="content">
    <view class="bgColor">
      <image src="/static/mine/mineBg.png" mode="aspectFill"></image>
    </view>
    <cusHeaderVue titleContent="修改密码" :showBack="true"></cusHeaderVue>
    
    <scroll-view 
      scroll-y="true"
      :style="{paddingTop: `calc(${scrollerHeight} + 90rpx)`, height: `calc(100vh - ${scrollerHeight} - 90rpx)`}"
    >
      <view class="contBox">
        <view class="contBoxBig">
          <view class="contBig">
            <view class="contName">原密码</view>
            <input 
              v-model="oldPassword" 
              type="text" 
              password 
              placeholder="请输入" 
              placeholder-style="color:#959BA5;"
            />
          </view>
          <view class="contBig">
            <view class="contName">新密码</view>
            <input 
              v-model="newPassword" 
              type="text" 
              password 
              placeholder="请输入" 
              placeholder-style="color:#959BA5;"
            />
          </view>
          <view class="contBig">
            <view class="contName">确认密码</view>
            <input 
              v-model="confirmPassword" 
              type="text" 
              password 
              placeholder="请输入" 
              placeholder-style="color:#959BA5;"
            />
          </view>
        </view>
      </view>
    </scroll-view>
    
    <view class="btnBox">
      <view class="btnLi" @click="handleSubmit">
        确认
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import cusHeaderVue from '@/components/cus-header.vue';
import { updateUserPassword } from '@/api/interface.js';

const scrollerHeight = ref('');
const oldPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');

// 获取状态栏高度
onLoad(() => {
  uni.getSystemInfo({
    success: (res) => {
      scrollerHeight.value = res.statusBarHeight + 'px';
    }
  });
});

// 提交修改
const handleSubmit = () => {
  // 1. 从本地获取存储的密码和用户ID
  const storedPassword = uni.getStorageSync('password'); // 假设已存
  const userId = uni.getStorageSync('userId');           // 假设已存

  // 2. 校验原密码
  if (oldPassword.value !== storedPassword) {
    uni.showToast({ title: '原密码错误', icon: 'none' });
    return;
  }

  // 3. 校验新密码非空
  if (!newPassword.value.trim()) {
    uni.showToast({ title: '请输入新密码', icon: 'none' });
    return;
  }

  // 4. 校验两次新密码一致
  if (newPassword.value !== confirmPassword.value) {
    uni.showToast({ title: '两次密码不一致', icon: 'none' });
    return;
  }

  // 5. 调用接口（只传 id 和新密码）
  updateUserPassword({
    id: userId,
    password: newPassword.value,
    oldpassword: oldPassword.value
  }).then(res => {
    if (res.code == 0 || res.data) {
      // 更新本地密码
      uni.setStorageSync('password', newPassword.value);
      uni.showToast({ title: '修改成功', icon: 'success' });
      setTimeout(() => uni.navigateBack(), 1000);
    } else {
      uni.showToast({ title: res.msg || '修改失败', icon: 'none' });
    }
  }).catch(err => {
    console.error('请求失败:', err);
    uni.showToast({ title: '网络错误', icon: 'none' });
  });
};
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
	}

	.bgColor {
		width: 100%;
		position: absolute;
		height: 100vh;
		z-index: -1;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contBox {
		padding: 22rpx;
		box-sizing: border-box;
		padding-bottom: calc(env(safe-area-inset-bottom) + 101rpx);
		.contBoxBig{
			border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
			background: #ffffff;
			box-shadow: 0 3.85rpx 13.46rpx 0 #b6b7b933;
			margin-bottom: 25rpx;
			padding: 1rpx 27rpx;
			box-sizing: border-box;
			.contBig{
				display: flex;
				align-items: center;
				padding: 40rpx 0;
				
				.contName{
					 color: #1c2027;
					 font-weight: 500;
					 font-size: 32.05rpx;
					 width: 126rpx;
					 text-align: right;
				}
				input{
					margin-left: 21rpx;
					flex: 1;
				}
			}
		}

		
		
	}

	.btnBox {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		// bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		bottom: 0;
		width: 100%;
		left: 0;
		padding: 20rpx 55rpx calc(env(safe-area-inset-bottom) + 20rpx);
		box-sizing: border-box;
		background: #f2f3f5;

		.btnLi {
			height: 80rpx;
			border-radius: 40.38rpx 40.38rpx 40.38rpx 40.38rpx;
			background: linear-gradient(-90deg, #feaf38, #f98434);
			box-shadow: 0 3.85rpx 4.49rpx 0 #f984344d;
			color: #ffffff;
			width: 512.82rpx;
			
			font-size: 32.05rpx;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		
	}
</style>